<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script type="importmap">
      {
        "imports": {
          "jest-mock": "https://esm.sh/jest-mock",
          "react": "https://esm.sh/react@18.3.1",
          "react-dom": "https://esm.sh/react-dom@18.3.1"
        }
      }
    </script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script type="module">
      import React from 'react';
      import ReactDOM from 'react-dom';

      window.React = React;
      window.ReactDOM = ReactDOM;
    </script>
    <script crossorigin="anonymous" defer src="/__dist__/webchat-es5.js"></script>
    <style type="text/css">
      .system-under-test__activity {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .system-under-test__counter {
        background-color: DarkSlateGray;
        border-radius: 4px;
        color: White;
        font-family: sans-serif;
        font-size: 75%;
        margin-left: 10px;
        padding: 0.2em 0.4em;
        width: fit-content;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="module">
      import { fn } from 'jest-mock';
      import { createElement } from 'react';

      run(async function () {
        const {
          testHelpers: { createDirectLineEmulator },
          WebChat: {
            middleware: { activityComponent, createActivityPolymiddleware }
          }
        } = window;

        const { directLine, store } = createDirectLineEmulator();

        const renderCall = fn(() => renderCall.mock.calls.length);

        const MyActivityMiddleware = ({ activity, renderNext, variant }) => {
          const numCalled = renderCall();

          return createElement(
            'div',
            { className: 'system-under-test__activity' },
            createElement('div', {}, renderNext?.render()),
            createElement('small', { className: 'system-under-test__counter' }, `Rendered times: ${numCalled}`)
          );
        };

        const activityPolymiddleware = createActivityPolymiddleware(
          next => request =>
            activityComponent(MyActivityMiddleware, {
              activity: request.activity,
              renderNext: next(request)
            })
        );

        // TODO: We should update the test to use another type of polymiddleware to show something actually changed.
        //       Currently, we only have activityPolymiddleware, hard to tell if the test is testing things properly.
        const dummyPolymiddleware = init => init === 'dummy' && (next => request => next(request));

        WebChat.renderWebChat(
          {
            directLine,
            polymiddleware: [dummyPolymiddleware, activityPolymiddleware],
            store
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          text: 'Hello, World!',
          type: 'message'
        });

        // THEN: Should render once.
        expect(renderCall).toHaveBeenCalledTimes(1);

        await host.snapshot('local');

        WebChat.renderWebChat(
          {
            directLine,
            // Modify an unrelated middleware.
            polymiddleware: [dummyPolymiddleware.bind(), activityPolymiddleware],
            store
          },
          document.getElementById('webchat')
        );

        // THEN: Should still render once, because no related middleware changed.
        expect(renderCall).toHaveBeenCalledTimes(1);

        await host.snapshot('local');
      });
    </script>
  </body>
</html>
